<template>
  <ul
    @mousedown="mousedownHandle"
    @mouseup="mouseUpHandle"
    @mouseleave="mouseUpHandle"
    @contextmenu="contextmenuHandle"
    ref="calendarTable"
    class="calendar-table"
  >
    <ul class="calendar-table__hearder">
      <li
        class="calendar-table__hearder-item"
        v-for="(item, index) in weeksName"
        :key="`week_${index}`"
      >
        {{ item }}
      </li>
    </ul>
    <ul
      class="calendar-table__content-row"
      v-for="(rowItem, rowIndex) in rowLine"
      :key="`row_${rowIndex}`"
    >
      <template v-for="weekNum in 7">
        <li
          v-if="getDatyType(weekNum, rowIndex) === 'last'"
          class="last-date table-item"
          :key="'last_' + rowIndex + weekNum"
        >
          <span class="date-text"> {{ getDateNum(0, weekNum) }}</span>
        </li>
        <li
          v-else-if="getDatyType(weekNum, rowIndex) === 'next'"
          class="next-date table-item"
          :key="'next_' + rowIndex + weekNum"
        >
          <span class="date-text">{{ getDateNum(rowIndex, weekNum) }}</span>
        </li>
        <li
          :data-currday="getDateNum(rowIndex, weekNum)"
          v-else
          :key="'curr_' + rowIndex + weekNum"
          class="table-item"
          @dblclick="dblclickHandle(getDateNum(rowIndex, weekNum))"
          :class="{
            'is-today': getDateNum(rowIndex, weekNum) === currDayNum,
            'is-select': isSelete(getDateNum(rowIndex, weekNum)),
          }"
        >
          <span class="date-text">{{ getDateNum(rowIndex, weekNum) }}</span>
          <slot></slot>
        </li>
      </template>
    </ul>
  </ul>
</template>

<script>
export default {
  name: 'CalendarTable',
  props: {
    weeksName: {
      type: Array,
      default: () => ['一', '二', '三', '四', '五', '六', '日'],
    },
    rowLine: {
      type: Number,
      default: 5,
    },
    whichday: {
      type: Number,
      default: 0,
    },
    lastMonthDay: {
      type: Number,
      default: 0,
    },
    currMonthDayNum: {
      type: Number,
      default: 30,
    },
    seleteDate: {
      type: Array,
      default: () => [],
    },
    currDayNum: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      isMonthOver: false,
      moveSelectList: [],
    }
  },
  methods: {
    getDatyType(weekNum, rowIndex) {
      if (weekNum - 1 < this.whichday && rowIndex === 0) {
        return 'last'
      } else if (
        rowIndex * 7 + weekNum - this.whichday >
        this.currMonthDayNum
      ) {
        return 'next'
      } else {
        return 'curr'
      }
    },
    getDateNum(rowIndex, weekNum) {
      const type = this.getDatyType(weekNum, rowIndex)
      const total = rowIndex * 7 + weekNum
      switch (type) {
        case 'last':
          return this.lastMonthDay + weekNum - 1
        case 'next':
          return total - this.whichday - this.currMonthDayNum
        case 'curr':
          return total - this.whichday
        default:
          return total - this.whichday
      }
    },
    isSelete(day) {
      return this.seleteDate.includes(day)
    },
    mousedownHandle() {
      const oDOM = this.$refs['calendarTable']
      oDOM.addEventListener('mousemove', this.moveHandle, false)
    },
    mouseUpHandle() {
      const oDOM = this.$refs['calendarTable']
      oDOM.removeEventListener('mousemove', this.moveHandle, false)
      this.submitSelect()
    },
    moveHandle(event) {
      var event = event || window.event
      const target = event.target || event.srcElement
      const num = parseInt(target.dataset.currday)
      if (!num) {
        return
      }

      // TODO: 防抖
      this.dubound(this.submitSelect, 400)

      this.moveSelectList.indexOf(num) === -1 && this.moveSelectList.push(num)
    },
    submitSelect() {
      this.$emit('moveAdd', this.moveSelectList)
      this.moveSelectList = []
    },
    dubound(fn, t) {
      let timer = null
      if (!timer) {
        clearTimeout(timer)
        timer = setTimeout(() => {
          console.log(123)
          fn()
          clearTimeout(timer)
        }, t)
      }
    },
    contextmenuHandle(event) {
      event.preventDefault()
      const mouse = {
        y: event.clientY,
        x: event.clientX,
      }
      this.$emit('openRightMenu', mouse)
    },
    dblclickHandle(dayNum) {
      this.$emit('dblclickHandle', dayNum)
    },
  },
}
</script>
<style lang="scss" scoped>
.calendar-table {
  cursor: pointer;
  &__hearder {
    display: flex;
    justify-self: start;
    border-bottom: 1px solid #000;
    padding: 10px 0;
    &-item {
      flex: 1 1 auto;
    }
  }
  &__content-row {
    display: flex;
    .table-item {
      width: 20%;
      border-right: 1px solid #000;
      border-bottom: 1px solid #000;
      position: relative;
      &:last-child {
        border-right: none;
      }
      .date-text {
        display: inline-block;
        -moz-user-select: none;
        -ms-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        position: absolute;
        top: 5px;
        right: 5px;
      }
    }
    &:last-child {
      .table-item {
        border-bottom: none;
      }
    }
    .last-date {
      color: #989898;
      background-color: #33333330;
    }
    .next-date {
      color: #989898;
      background-color: #33333330;
    }
    .is-select {
      color: red !important;
      background-color: #f4000022 !important;
    }
    .is-today {
      color: green;
      font-weight: bold;
      background-color: #00ff001f;
    }
  }
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
</style>
